import CodeView from '../../../shared/components/CodeView.jsx';
import { getDisplayElementById } from '../../shared/helpers';
import * as Base from './example';

<div className="doc lead">
  Sizing utilities allow for easy width sizing on an element.
</div>

## About Sizing
Our sizing class names are set up in a human-readable format, e.g. `.slds-size_1-of-2`. This equates to a width of 50%.

By default, a group of sizing helpers are created based on standard grid column spans of 2, 3, 4, 5, 6, 7, 8 and 12. For example, if you need 3 cards to horizontally align along the same x-axis, you would use the class `.slds-size_1-of-3` on each element. This will make each card take up 33.333% of containing section.

Our sizing helpers have the option to be responsive. By pre-pending a breakpoint name to a sizing helper, e.g. `.slds-medium-size_1-of-3` you will output a width at the specified breakpoint name.

Absolute sizing helpers are also available (where widths are declared in `rem` units): `xx-small`, `x-small`, `medium`, `large`, `x-large` and `xx-large` as defined in the [sizing category of the Design Tokens](/design-tokens/#category-sizing). e.g. `.slds-size_large`.

In some uncommon cases, you may need a sizing helper that is up to a certain breakpoint. For these, use the classes prefixed with `max-` to achieve this result.

Here is an overview of our available breakpoint names:

| Breakpoint Name | Breakpoint Width         |
| --------------- | ------------------------ |
| `small-`        | 30em / 480px and higher  |
| `medium-`       | 48em / 768px and higher  |
| `large-`        | 64em / 1024px and higher |
| `max-small-`    | up to 29.9375em / 479px  |
| `max-medium-`   | up to 47.9375em / 767px  |
| `max-large-`    | up to 63.9375em / 1023px |

Our responsive sizing helpers are built upon a mobile first approach. To achieve the desired outcome of this approach, you will need to append responsive sizing helpers to an element that overrides the previous breakpoint. A default sizing helper is required and responsive sizing helpers are additive. The following example demonstrates the class name position for each breakpoint:

`<div class="[default] [small size override] [medium size override] [large size override]">`

## Examples

### 2 Column Span
<CodeView>
  {getDisplayElementById(Base.examples, 'two-column')}
</CodeView>

### 3 Column Span
<CodeView>
  {getDisplayElementById(Base.examples, 'three-column')}
</CodeView>

### 4 Column Span
<CodeView>
  {getDisplayElementById(Base.examples, 'four-column')}
</CodeView>

### 5 Column Span
<CodeView>
  {getDisplayElementById(Base.examples, 'five-column')}
</CodeView>

### 6 Column Span
<CodeView>
  {getDisplayElementById(Base.examples, 'six-column')}
</CodeView>

### 7 Column Span
<CodeView>
  {getDisplayElementById(Base.examples, 'seven-column')}
</CodeView>

### 8 Column Span
<CodeView>
  {getDisplayElementById(Base.examples, 'eight-column')}
</CodeView>

### 12 Column Span
<CodeView>
  {getDisplayElementById(Base.examples, 'twelve-column')}
</CodeView>
